<template>

  <div>

    <div>
      <el-radio-group v-model="radioinfo" @change="ConstraintChange">
        <el-radio :label="1">ALL</el-radio>
        <el-radio :label="2">Constrained</el-radio>
        <el-radio :label="3">UnConstrained</el-radio>
      </el-radio-group>
    </div>
    <!--    使用 ref="filterTable" ,然后在函数里就可以this.$refs.filterTable选到这个el-table了
    具体用啊参见 https://www.jianshu.com/p/623c8b009a85 -->
    <el-table
        :data="tableData"
        style="width: 100%"
        @sort-change="ChangeSort"
        @filter-change="filterchange"
        ref="filterTable"


    >
      <!--尝试用el-table的filter-change事件搭配 列中的column-key属性进行后台过滤    ,一下的column都将filter-method属性拿出来试下
      :filter-method="filterStrength"-->
      <el-table-column
          prop="strength"
          label="Strength"
          sortable="custom"
          width="180"
          column-key="strength"
          :filters="[
        { text: '2', value: '2' },
        { text: '3', value: '3' },
        { text: '4', value: '4' },
        { text: '5', value: '5' },
        { text: '6', value: '6' },
      ]"

      />
      <!--    :filter-method属性，指定小三角下拉框的confirm按钮执行的函数！
         对:filters中的每一个元素执行都执行，
         比如这里 :filter-method="filterStrength"filterStrength，则对filters中每一个元素都执行filterHandler，
         如果选择一项，则执行5次，两项，执行10次-->
      <!--     :filter-method="filterStrength"-->
      <el-table-column
          prop="model"
          label="ModelName"

          width="180"
          column-key="modelxname"
          :filters="getModelNamex()"

      />
      <!--         :filter-method="filterAlgorithm"-->
      <el-table-column
          prop="tools"
          label="Algorithm"

          width="180"
          column-key="tools"
          :filters="[
        { text: 'acts', value: 'acts' },
        { text: 'pict', value: 'pict' },
        { text: 'cagen', value: 'cagen' },
        { text: 'medici', value: 'medici' },
        { text: 'casa', value: 'casa' },
        { text: 'fastca', value: 'fastca' },
        { text: 'jenny', value: 'jenny' },
        { text: 'tcases', value: 'tcases' },
        { text: 'jcunit', value: 'jcunit' },
        { text: 'coffee4j', value: 'coffee4j' },

      ]"

      />
      <el-table-column
          prop="sizeave"
          label="Average Size"
          sortable
          width="180"

      />
      <el-table-column
          prop="timeave"
          label="Average Time"
          sortable
          width="180"

      />
      <el-table-column
          prop="sizebest"
          label="Best Size"
          sortable
          width="180"

      />
      <el-table-column
          prop="timebest"
          label="Best Time"
          sortable
          width="180"

      />
      <el-table-column
          prop="status"
          label="Status"
          width="180"
      >
        <template #default="scope">
          <el-tag
              :type="scope.row.status === 'success' ? 'success' : 'danger'"
              disable-transitions
          >{{ scope.row.status }}
          </el-tag
          >
        </template>
      </el-table-column>

      <el-table-column prop="limitation" label="Constraint" width="180"/>
      <el-table-column prop="success" label="Success" width="180"/>
      <el-table-column label="Operations" width="180">
        <template #default="scope">
          <el-button size="mini" @click="detail(scope.row)">Details</el-button>
          <!--          <el-button size="mini" type="danger" >Delete</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="Pagenum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPages"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
      <!--    currentPagefor为变量，要跳转到哪一页
              totalPages为变量，总共有多少项，从数据库中获取-->
    </el-pagination>
  </div>
</template>

<script>

import request from "@/utils/request"


export default {
  name: "FilterTable",
  data() {
    return {
      count: 0,
      tableData: [],
      PageSize: 100,
      totalPages: 1,
      Pagenum: 1,
      radioinfo: 1,
      modelname: [],
      strengthData: [],
      modelxnameData: [],
      toolsData: [],
      strengtharrayForBackend: [],
      modelxnamearraayForBackend: [],
      toolsarrayarrayForBackend: [],
    }
  },
  created() {
    this.load();
    this.getModelName();
  },
  methods: {

    load: function () {
      this.strengthData = [];
      this.modelxnameData = [];
      this.toolsData = [];
      console.log("当前的Constraint是" + this.radioinfo);
      // load函数发出get请求，请求url为find，
      //GET请求传参数的方式为 {params:{}} {}中间写写参数
      //(url,{params: {参数}})
      // 传入后台的参数为PageNum PageSize Search ，值为this.*
      /*PageNum: this.PageNum,
      PageSize: this.PageSize,
      search: this.search*/
      request.get('/api/LoadFilterTable',
          {
            params: {
              // :的左边是发送的请求参数名
              //即PageNum、PageSize、search为请求参数名
              PageNum: this.Pagenum,
              PageSize: this.PageSize,
              radioinfo: this.radioinfo,
            }
          }).then(res => {

        //res就是用Result类封装的回复，res里面有data，data里面有records，records就是我们需要的数据
        this.tableData = res.data.records
        this.totalPages = res.data.total
      })
    }

    ,
    handleSizeChange: function (pagesize) {
      this.PageSize = pagesize;
      //改变当前每页的个数触发
      this.load();
    },
    handleCurrentChange: function (pagenum) {
      this.Pagenum = pagenum;
      //改变当前页码时触发
      this.load();
    },
    //后台读取modelname到下拉框选择
    getModelName: function () {
      request.get('api/GetModelName', {
        params: {
          constraint: this.radioinfo
        }
      }).then(res => {

        this.modelname = res.data;

      })


    },
    filterchange: function (obj) {
      //obj是一个proxy对象，而想要的数据在proxy对象的target属性中。
      //通过下面的JSON.parse(JSON.stringify(obj))，将obj转为了json对象
      //再通过obj.属性，就可以获取到值了
      var object = JSON.parse(JSON.stringify(obj))
      //这里的object.strength、object.modelxname、object.tools的strength、modelxname、tools是column-key指定的别名
      console.log("obj是")
      console.log(object)
      console.log("strength是")
      console.log(object.strength)
      console.log("modelxname是")
      console.log(object.modelxname)
      console.log("tools是")
      console.log(object.tools)
      //存储三个条件的数据
      this.storeFilterData(object.strength, object.modelxname, object.tools)
    },
    storeFilterData: function (strength, modelxname, tools) {
      console.log("接收到的数据是" + strength, modelxname, tools)
      //这里巧妙的解决了,原来js里的 0 、[]、undefined三者是不同的。
      //基础不牢地动山摇啊，浪费了半天时间在这里
      if (strength == 0) {
        console.log("strength为空，置this.strengthData为空")
        this.strengthData = [];
      } else {
        if (strength != undefined) this.strengthData = strength;

        // for(var item in strength)
        // {
        //   this.strengthData.push(strength[item]);
        // }
      }


      if (modelxname == 0) {
        this.modelxnameData = []
      } else {
        if (modelxname != undefined) {
          this.modelxnameData = modelxname;
        }
        // for(var item in modelxname)
        // {
        //    this.modelxnameData.push(modelxname[item]);
        //  }
      }

      if (tools == 0) {
        this.toolsData = []
      } else {
        if (tools != undefined) {
          this.toolsData = tools
        }
        // for(var item in tools)
        //  {
        //    this.toolsData.push(tools[item]);
        //  }
      }


      var strengtharray = JSON.parse(JSON.stringify(this.strengthData))
      var strengtharraySET = new Set(strengtharray)
      strengtharray = Array.from(strengtharraySET)
      console.log("处理过后的this.strengthData是")
      console.log(strengtharray)


      var modelxnamearraay = JSON.parse(JSON.stringify(this.modelxnameData))
      var modelxnamearraaySET = new Set(modelxnamearraay)
      modelxnamearraay = Array.from(modelxnamearraaySET)
      console.log("处理过后的this.modelxnameData是")
      console.log(modelxnamearraay)


      var toolsarray = JSON.parse(JSON.stringify(this.toolsData))
      var toolsarraySET = new Set(toolsarray)
      toolsarray = Array.from(toolsarraySET)
      console.log("处理过后的this.toolsData是")
      console.log(toolsarray)

      //  将数据传给后台进行查询
      request.post('api/QueryByFilter',
          //data是一个json串
          {
            pagenumber: this.Pagenum,
            pagesizes: this.PageSize,
            radioinfo: this.radioinfo,
            strength: strengtharray,
            modelxname: modelxnamearraay,
            tools: toolsarray,
          }
      ).then(res => {
        this.tableData = res.data.records
        this.totalPages = res.data.total
      })
    },
    //改变radio单选框时触发
    ConstraintChange: function () {
      //elementPlus的功能，不需要显式传递参数，value就是选中单选框的label
      this.$refs.filterTable.clearFilter();
      this.load()
    },
    ChangeSort: function (column) {

      console.log(column);
      console.log(column.order);
      console.log(column.prop);
    },
    //ModelName这一列的下拉框的数组
    getModelNamex: function () {
      return [{text: "gcc", value: "gcc"}, {text: "CommProtocol", value: "CommProtocol"}, {
        text: "Berkeley",
        value: "Berkeley"
      }, {text: "apache", value: "apache"}, {text: "Healthcare1", value: "Healthcare1"}, {
        text: "sed",
        value: "sed"
      }, {text: "Eshop-fm", value: "Eshop-fm"}, {text: "make", value: "make"}, {
        text: "spins",
        value: "spins"
      }, {text: "car", value: "car"}, {text: "REAL-FM-12", value: "REAL-FM-12"}, {
        text: "mysql",
        value: "mysql"
      }, {text: "apache-small", value: "apache-small"}, {
        text: "ProcessorComm2",
        value: "ProcessorComm2"
      }, {text: "fame_dbms", value: "fame_dbms"}, {text: "siena", value: "siena"}, {
        text: "mysql-small",
        value: "mysql-small"
      }, {text: "Healthcare2", value: "Healthcare2"}, {text: "bugzilla", value: "bugzilla"}, {
        text: "spinv",
        value: "spinv"
      }, {text: "Drupal", value: "Drupal"}, {text: "slider", value: "slider"}, {
        text: "nanoxml",
        value: "nanoxml"
      }, {text: "connector", value: "connector"}, {text: "smart_home", value: "smart_home"}, {
        text: "Banking2",
        value: "Banking2"
      }, {text: "Services", value: "Services"}, {text: "credit", value: "credit"}, {
        text: "ecos-icse11",
        value: "ecos-icse11"
      }, {text: "stack", value: "stack"}, {text: "freebsd-icse11", value: "freebsd-icse11"}, {
        text: "flex",
        value: "flex"
      }, {text: "Healthcare3", value: "Healthcare3"}, {text: "Storage3", value: "Storage3"}, {
        text: "TightVNC",
        value: "TightVNC"
      }, {text: "Storage4", value: "Storage4"}, {text: "Linux-small", value: "Linux-small"}, {
        text: "grep",
        value: "grep"
      }, {text: "Healthcare4", value: "Healthcare4"}, {text: "M7_V2", value: "M7_V2"}, {
        text: "html5-parsing",
        value: "html5-parsing"
      }, {text: "aircraft", value: "aircraft"}, {text: "M8_V1", value: "M8_V1"}, {
        text: "Violet",
        value: "Violet"
      }, {text: "browser_layout", value: "browser_layout"}, {text: "Storage5", value: "Storage5"}, {
        text: "Apl",
        value: "Apl"
      }, {text: "Gg4", value: "Gg4"}, {text: "Busybox-small", value: "Busybox-small"}, {
        text: "browser_video",
        value: "browser_video"
      }, {text: "tcas", value: "tcas"}, {text: "M9_V1", value: "M9_V1"}, {
        text: "arcade_game_pl",
        value: "arcade_game_pl"
      }, {text: "html5-vcl", value: "html5-vcl"}, {text: "SystemMgmt", value: "SystemMgmt"}, {
        text: "gzip",
        value: "gzip"
      }, {text: "NetworkMgmt", value: "NetworkMgmt"}, {text: "browser_audio", value: "browser_audio"}, {
        text: "M10_V1",
        value: "M10_V1"
      }, {text: "Graph-product-line", value: "Graph-product-line"}, {
        text: "printtokens",
        value: "printtokens"
      }, {text: "M6_V3", value: "M6_V3"}, {text: "browser_decoding", value: "browser_decoding"}, {
        text: "replace",
        value: "replace"
      }, {text: "AspectOptima", value: "AspectOptima"}, {
        text: "ProcessorComm1",
        value: "ProcessorComm1"
      }, {text: "M10_V2", value: "M10_V2"}, {text: "movies_app", value: "movies_app"}, {
        text: "M1_V1",
        value: "M1_V1"
      }, {text: "M7_V1", value: "M7_V1"}, {text: "M17_V1", value: "M17_V1"}, {
        text: "browser_fetching",
        value: "browser_fetching"
      }, {text: "Sensor", value: "Sensor"}, {text: "M17_V2", value: "M17_V2"}, {
        text: "M10_V3",
        value: "M10_V3"
      }, {text: "Telecom", value: "Telecom"}, {text: "M1_V2", value: "M1_V2"}, {
        text: "2.6.28.6-icse11",
        value: "2.6.28.6-icse11"
      }, {text: "M12_V1", value: "M12_V1"}, {text: "M3_V2", value: "M3_V2"}, {
        text: "M18_V1",
        value: "M18_V1"
      }, {text: "M11_V1", value: "M11_V1"}, {text: "M26_V2", value: "M26_V2"}, {
        text: "M12_V2",
        value: "M12_V2"
      }, {text: "M15_V3", value: "M15_V3"}, {text: "M4_V1", value: "M4_V1"}, {
        text: "M17_V3",
        value: "M17_V3"
      }, {text: "M27_V1", value: "M27_V1"}, {text: "M16_V1", value: "M16_V1"}, {
        text: "M11_V2",
        value: "M11_V2"
      }, {text: "M21_V5", value: "M21_V5"}, {text: "M13_V1", value: "M13_V1"}, {
        text: "M45_V2",
        value: "M45_V2"
      }, {text: "M20_V2", value: "M20_V2"}, {text: "M46_V1", value: "M46_V1"}, {
        text: "M3_V1",
        value: "M3_V1"
      }, {text: "M35_V1", value: "M35_V1"}, {text: "M4_V2", value: "M4_V2"}, {
        text: "M27_V2",
        value: "M27_V2"
      }, {text: "M21_V1", value: "M21_V1"}, {text: "M16_V2", value: "M16_V2"}, {
        text: "M19_V1",
        value: "M19_V1"
      }, {text: "M38_V1", value: "M38_V1"}, {text: "M38_V2", value: "M38_V2"}, {
        text: "M46_V2",
        value: "M46_V2"
      }, {text: "M22_V1", value: "M22_V1"}, {text: "M13_V2", value: "M13_V2"}, {
        text: "M6_V1",
        value: "M6_V1"
      }, {text: "M23_V2", value: "M23_V2"}, {text: "M19_V2", value: "M19_V2"}, {
        text: "M28_V1",
        value: "M28_V1"
      }, {text: "M35_V2", value: "M35_V2"}, {text: "M47_V1", value: "M47_V1"}, {
        text: "M14_V1",
        value: "M14_V1"
      }, {text: "M28_V2", value: "M28_V2"}, {text: "M24_V1", value: "M24_V1"}, {
        text: "M14_V2",
        value: "M14_V2"
      }, {text: "M6_V2", value: "M6_V2"}, {text: "M21_V2", value: "M21_V2"}, {
        text: "M28_V3",
        value: "M28_V3"
      }, {text: "M42_V2", value: "M42_V2"}, {text: "M39_V1", value: "M39_V1"}, {
        text: "M47_V2",
        value: "M47_V2"
      }, {text: "M15_V1", value: "M15_V1"}, {text: "M36_V1", value: "M36_V1"}, {
        text: "M20_V1",
        value: "M20_V1"
      }, {text: "M22_V2", value: "M22_V2"}, {text: "M24_V2", value: "M24_V2"}, {
        text: "M25_V2",
        value: "M25_V2"
      }, {text: "M15_V2", value: "M15_V2"}, {text: "M42_V3", value: "M42_V3"}, {
        text: "M25_V3",
        value: "M25_V3"
      }, {text: "M47_V3", value: "M47_V3"}, {text: "M39_V2", value: "M39_V2"}, {
        text: "M36_V2",
        value: "M36_V2"
      }, {text: "M23_V1", value: "M23_V1"}, {text: "M21_V3", value: "M21_V3"}, {
        text: "M48_V1",
        value: "M48_V1"
      }, {text: "M37_V1", value: "M37_V1"}, {text: "M41_V1", value: "M41_V1"}, {
        text: "M42_V4",
        value: "M42_V4"
      }, {text: "M24_V3", value: "M24_V3"}, {text: "M48_V2", value: "M48_V2"}, {
        text: "M37_V2",
        value: "M37_V2"
      }, {text: "M21_V4", value: "M21_V4"}, {text: "M32_V3", value: "M32_V3"}, {
        text: "M41_V2",
        value: "M41_V2"
      }, {text: "M24_V4", value: "M24_V4"}, {text: "M25_V1", value: "M25_V1"}, {
        text: "M42_V1",
        value: "M42_V1"
      }, {text: "schedule", value: "schedule"}, {text: "M30_V2", value: "M30_V2"}, {
        text: "totinfo",
        value: "totinfo"
      }, {text: "M32_V1", value: "M32_V1"}, {text: "html5-audio", value: "html5-audio"}, {
        text: "M44_V1",
        value: "M44_V1"
      }, {text: "find", value: "find"}, {text: "M32_V2", value: "M32_V2"}, {
        text: "soot-pdg",
        value: "soot-pdg"
      }, {text: "M44_V2", value: "M44_V2"}, {text: "dsi-rax3", value: "dsi-rax3"}, {
        text: "sort",
        value: "sort"
      }, {text: "findstr", value: "findstr"}, {text: "dsi-rax1", value: "dsi-rax1"}, {
        text: "M33_V1",
        value: "M33_V1"
      }, {text: "html5-video", value: "html5-video"}, {text: "dsi-rax4", value: "dsi-rax4"}, {
        text: "chmod",
        value: "chmod"
      }, {text: "attrib", value: "attrib"}, {text: "M33_V2", value: "M33_V2"}, {text: "las", value: "las"}, {
        text: "fc",
        value: "fc"
      }, {text: "M34_V1", value: "M34_V1"}, {text: "nvd", value: "nvd"}, {text: "dmas", value: "dmas"}, {
        text: "tokens",
        value: "tokens"
      }, {text: "desigo", value: "desigo"}, {text: "M40_V1", value: "M40_V1"}, {text: "ti", value: "ti"}, {
        text: "vim",
        value: "vim"
      }, {text: "M40_V2", value: "M40_V2"}, {text: "modem", value: "modem"}, {
        text: "dsi-rax2",
        value: "dsi-rax2"
      }, {text: "fgs", value: "fgs"}, {text: "simured", value: "simured"}, {
        text: "sylpheed",
        value: "sylpheed"
      }, {text: "Insurance", value: "Insurance"}, {text: "smartphone", value: "smartphone"}, {
        text: "M2_V1",
        value: "M2_V1"
      }, {text: "M2_V2", value: "M2_V2"}, {text: "addpark", value: "addpark"}, {
        text: "M2_V3",
        value: "M2_V3"
      }, {text: "M30_V1", value: "M30_V1"}, {text: "voice", value: "voice"}, {
        text: "contiki",
        value: "contiki"
      }, {text: "xterm", value: "xterm"}]
    },


  }
}
</script>

<style scoped>

</style>